<template>
  <div id="activitydetails">
    <div class="actmsg">
      <img class="signpic" src="../../assets/images/starting.png" v-if="isShow1.starting">
      <img class="signpic" src="../../assets/images/ending.png" v-if="isShow1.ending">
      <div class="header">
        <span class="pic"><img :src="data.activityImg1" ></span>
        <span class="txt">{{data.activityTitle}}</span>
      </div>
      <div class="main">
        <div class="datatime">
          <i class="fa fa-clock-o" aria-hidden="true"></i>
          <span>{{data.startTime}}</span><span>&nbsp至&nbsp</span><span>{{data.endTime}}</span>
        </div>
        <div class="place">
          <i class="fa fa-map-marker" aria-hidden="true"></i>
          <span>{{data.activitylocation}}</span>
        </div>
        <div class="perNum">
          <i class="fa fa-user-o" aria-hidden="true"></i>
          <span>已报名{{data.activityNumPle}}/{{data.activityMaxCount}}人</span>
        </div>
      </div>
    </div>
    <div class="activityContent">
      <i class="fa fa-file-text-o " aria-hidden="true"></i>
      <div class="contain" v-html="data.activityDetail">
      </div>
    </div>
    <box gap="20px 30px">
      <x-button :text="isShow1.txt" :disabled="disabled"  @click.native="processButton((name = data.activityTitle))" type="primary"></x-button>
    </box>
  </div>
</template>
<script>
  import { XButton, Box } from 'vux'
  export default {
    name: 'activitydetails',
    components: {
      XButton,
      Box
    },
    data () {
      return {
        data: {},
        disabled: false,
        isShow1: {
          txt: '',
          starting: false,
          ending: false
        }
      }
    },
    created () {
      this.getVipActivityDetails()
    },
    computed: {
    },
    methods: {
      change (value) {
        // console.log('change:', value)
      },
      processButton (name) {
        // console.log(this.$route.query)
        if (this.data.status === '进行中' && this.data.state === 0) {
          window.zhuge.track('Click', {
            '事件名称': '会员中心-会员活动-互动活动-活动名称-我要参加-点击',
            '访问时间': new Date().toLocaleString(),
            'OpenID': this.getCookie('openid'),
            '活动名称': name
          }, () => {
            this.routeto('activityapply', { id: this.data.id })
          })
        }
      },
      getVipActivityDetails () {
        this.$axios.post(this.apidomain + '/api/activity//getApplyActivityDetail/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          id: Number(this.$route.query.id)
        })
        .then((response) => {
          if (response.data.errorCode === '0') {
            this.data = response.data.data
            if (this.data.status === '进行中' && this.data.state === 0) {
              this.isShow1.starting = true
              this.isShow1.txt = '我要参加'
            } else if (this.data.status === '进行中' && this.data.state === 1) {
              this.isShow1.starting = true
              this.isShow1.txt = '已参加'
              this.disabled = true
            } else if (this.data.status === '已结束' && this.data.state === 0) {
              this.isShow1.ending = true
              this.isShow1.txt = '已结束'
              this.disabled = true
            } else if (this.data.status === '已结束' && this.data.state === 1) {
              this.isShow1.ending = true
              this.isShow1.txt = '已参加'
              this.disabled = true
            }
          }
          // console.log(this.data)
          // console.log(this.isShow1.starting)
        })
        .catch((error) => {
          console.log(error)
        })
      }
    }
  }
</script>
<style lang="less">
   @import "../../assets/less/activitydetails/activitydetails.less";
</style>
